<template>
  <tui-list-cell :unlined="unlined" padding="22rpx 28rpx" :arrow="arrow" :border-radius="borderRadius" @click="onclick">
    <view class="item flex-row align-center">
      <view class="label flex-row margin-right-20 relative" :style="{width:labelWidth}">
        <view v-if="must" class="margin-right-6">
          <text class="text-30 color-error">*</text>
        </view>
		<view v-else style="width: 10rpx;height: 10rpx;margin-right: 10rpx;">
		  <text class="text-30 color-error"></text>
		</view>
        <text class="text-30 color-t1">{{ label }}</text>
      </view>
      <view class="value flex-row flex-item align-center justify-end">
        <slot v-if="hasSlot" />
        <input
          v-else
          :type="type"
          :value="value"
          :placeholder="placeholder"
          :maxlength="maxlength"
          :disabled="disabled"
          class="value text-30 color-t1 flex-item text-right"
          placeholder-class="color-t3"
          @input="input"
        >
        <text v-if="suffix" class="text-30 color-t1 margin-left-10">{{ suffix }}</text>
      </view>
    </view>
  </tui-list-cell>
</template>

<script>
export default {
  name: 'LFormCell',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    must: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'text'
    },
    maxlength: {
      type: Number,
      default: -1
    },
    arrow: {
      type: Boolean,
      default: false
    },
    borderRadius: {
      type: String,
      default: ''
    },
    unlined: {
      type: Boolean,
      default: false
    },
    hasSlot: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: String,
      default: ''
    },
    suffix: {
      type: String,
      default: ''
    }
  },
  methods: {
    onclick() {
      this.$emit('click')
    },
    input(e) {
      this.$emit('input', e.detail.value)
    }
  }
}
</script>

<style scoped lang="scss">
@include setMargin(right,6);
.item,.value{
  min-height:64rpx;
}
.label{
  width:210rpx;
}
</style>
